<template>
  <div>
    <el-tree
      :data="data"
      node-key="indexId"
      ref="selectTree"
      :expand-on-click-node="false"
      :default-expand-all="true"
    >
      <div class="custom_tree_node" slot-scope="{ data }">
        <div style="display: flex; align-items: center">
          <div class="state" v-if="data.type == 1 || data.type == 2">
            <div v-if="data.status == 1" class="round"></div>
            <div v-if="data.status == 2" class="round_finish"></div>
            <div v-if="data.status == -1" class="round_fail"></div>
          </div>
          <div
            class="statechapter state"
            v-if="data.type == 3 || data.type == 4"
          >
            <!-- 教师端查看学生进度 的课程目录 -->
            <div class="exam_icon" v-if="data.examId && data.examSubmitType == 1 && !data.leaderPercentage">
              考
            </div>
            <div class="exam_icon"
                 v-if="data.examId && (data.examSubmitType == 2 || (data.examSubmitType == 1 && data.leaderPercentage > 0))"
            >
              组
            </div>
            <div class="leader_icon"
                 v-if="data.homeworkId && data.homeworkSubmitType == 1 && !data.homeworkLeaderPercentage"
            >
              作
            </div>
            <div class="leader_icon"
                 v-if="data.homeworkId && (data.homeworkSubmitType == 2 || (data.homeworkSubmitType == 1 && data.homeworkLeaderPercentage > 0))"
            >
              组
            </div>
            <img
              v-if="data.studyStatus == 1"
              class="acting_icon"
              src="@/assets/images/courseAdd/acting_icon.png"
              alt="加载失败"
            />
            <i v-if="data.studyStatus == 2" class="el-icon-success"></i>
            <i v-if="data.studyStatus == -1" class="el-icon-error"></i>
          </div>
          <tooltip
            :text="data.indexName"
            :width="355 - (data.level - 1) * 16 + ''"
            class="label"
          ></tooltip>
        </div>
        <div class="flex_center examHomeworkBtns">
          <!--  考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过） 4.退回重做  新+的状态-->
          <!-- 考核 --------------------->
          <!-- 判断条件： examSubmitType（所有人1） leaderPercentage（组长评分<0，则为非组长模式 能直接重考）
                             examSubmitType（所有人1） leaderPercentage （组长评分>0，则为组长模式 组长能直接重考）
                              examSubmitType 2为组长模式 需要组长才能重考
              -->

          <!-- &&((data.examSubmitType == 1 && !data.leaderPercentage) ||
                  (data.examSubmitType == 1 &&
                    data.leaderPercentage > 0 &&
                    isLeader == 1) ||
                  (data.examSubmitType == 2 && isLeader == 1))  这里老师就是能重考 -->

          <!-- &&
      (data.examSubmitType == 1 ||
        (data.examSubmitType == 2 && isLeader == 1)) 这里老师就是能重考-->
          <div class="examBtns flex flexColCenter">
            <template v-if="data.retestCount">
              <el-popover placement="top-start" trigger="hover">
                <div class="tip">
                  已重考
                  <span style="color: #fa6400">{{ data.retestCount }}</span> 次
                </div>

                <div
                  slot="reference"
                  class="examRedoBtn"
                  v-if="
                    courseInfo.finishStatus != 1 &&
                    data.examPaperId &&
                    data.examStatus != 4 &&
                    data.examStatus != 2&&
                    (data.examSubmitType == 1 ||
                      (data.examSubmitType == 2 && isLeader == 1))
                  "
                  @click="resetExam(data.examPaperId)"
                >
                  考核重考
                </div>
              </el-popover>
            </template>
            <div v-if="!data.retestCount">
              <div
                class="examRedoBtn"
                v-if="
                    courseInfo.finishStatus != 1 &&
                    data.examPaperId &&
                    data.examStatus != 4 &&
                    data.examStatus != 2&&
                    (data.examSubmitType == 1 ||
                      (data.examSubmitType == 2 && isLeader == 1))
                  "
                @click="resetExam(data.examPaperId)"
              >
                考核重考
              </div>
            </div>
            <div
              class="examMarkBtn"
              v-if="
                data.examStatus == 3 &&
                data.examPaperId &&
                data.teacherPercentage > 0
              "
              @click="routeTo(data, 1, 1)"
            >
              考核批改
            </div>
            <!-- 分数 -->
            <template v-if="data.examStatus == 1 || data.examStatus == -1">
              <el-popover
                placement="top"
                v-if="data.examPaperId"
                @show="showScoreInfo(data.examPaperId, 'exam')"
                trigger="hover"
              >
                <el-table
                  v-if="data.examSubmitType == 1"
                  :data="scoreInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-if="data.examSubmitType == 2"
                  :data="scoreInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="otherGroupScorePercent > 0"
                    prop="otherGroupScore"
                    align="center"
                    label="组间互评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.otherGroupScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div
                  slot="reference"
                  :class="{
                    green_color: data.examStatus == 1,
                    red_color: data.examStatus == -1,
                  }"
                  class="examscore"
                >
                  {{ data.score }}
                </div>
              </el-popover>
              <div
                v-if="!data.examPaperId"
                @click="showScoreInfo(data.examPaperId, 'exam')"
                class="examscore"
              >
                {{ data.score }}
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                content="查看试卷"
                placement="top-start"
              >
                <img
                  v-if="
                    data.examPaperId ||
                    (!data.examPaperId && data.studyStatus == 2)
                  "
                  @click="routeTo(data, 2, 1)"
                  class="exam_paper_png"
                  src="@/assets/images/courseAdd/examDetail.png"
                  alt="加载失败"
                />
              </el-tooltip>
            </template>
          </div>
          <!-- ------------------------- -->
          <div
            style="margin: 0 20px"
            v-if="
              data.homeworkPaperId &&
              data.homeworkStatus != 0 &&
              data.homeworkStatus != 2 &&
              data.homeworkStatus != 4 &&
              data.examPaperId &&
              data.examStatus != 4 &&
              data.examStatus != 0 &&
              data.examStatus != 2
            "
          >
            |
          </div>
          <!-- 作业 ---------------------->
          <div class="homeworkBtns flex flexColCenter">
            <template v-if="data.homeworkRetestCount">
              <el-popover placement="top-start" trigger="hover">
                <div class="tip">
                  已重做
                  <span style="color: #fa6400">{{
                      data.homeworkRetestCount
                    }}</span>
                  次
                </div>
                <!-- &&
                  ((data.homeworkSubmitType == 1 && !data.leaderPercentage) ||
                    (data.homeworkSubmitType == 1 &&
                      data.leaderPercentage > 0 &&
                      isLeader == 1) ||
                    (data.homeworkSubmitType == 2 && isLeader == 1)) -->
                <!-- 考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过） 4.退回重做  新+的状态 -->
                <div
                  slot="reference"
                  class="homeworkRedoBtn"
                  v-if="
                    courseInfo.finishStatus != 1 &&
                    data.homeworkPaperId &&
                    data.homeworkStatus != 4 &&
                    data.homeworkStatus != 2 &&
                    (data.homeworkSubmitType == 1 ||
                      (data.homeworkSubmitType == 2 && isLeader == 1))
                  "
                  @click="resetHomework(data.homeworkPaperId)"
                >
                  作业重做
                </div>
              </el-popover>
            </template
            >

            <div v-if="!data.homeworkRetestCount">
              <div
                class="homeworkRedoBtn"
                v-if="
                  courseInfo.finishStatus != 1 &&
                  data.homeworkPaperId &&
                  data.homeworkStatus != 4 &&
                  data.homeworkStatus != 2 &&
                  (data.homeworkSubmitType == 1 ||
                    (data.homeworkSubmitType == 2 && isLeader == 1))
                "
                @click="resetHomework(data.homeworkPaperId)"
              >
                作业重做
              </div>
            </div>
            <div
              class="homeworkMarkBtn"
              v-if="
                data.homeworkStatus == 3 &&
                data.homeworkPaperId &&
                data.homeworkTeacherPercentage > 0
              "
              @click="routeTo(data, 1, 6)"
            >
              作业批改
            </div>
            <!-- 分数 -->
            <template
              v-if="data.homeworkStatus == 1 || data.homeworkStatus == -1"
            >
              <el-popover
                placement="top"
                v-if="data.homeworkPaperId"
                @show="showScoreInfo(data.homeworkPaperId, 'homework')"
                trigger="hover"
              >
                <el-table
                  v-if="data.homeworkSubmitType == 1"
                  :data="scoreInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-if="data.homeworkSubmitType == 2"
                  :data="scoreInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="otherGroupScorePercent > 0"
                    prop="otherGroupScore"
                    align="center"
                    label="组间互评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.otherGroupScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div slot="reference" class="homeworkscore">
                  {{ data.homeworkScore }}
                </div>
              </el-popover>
              <div
                v-if="!data.homeworkPaperId"
                @click="showScoreInfo(data.homeworkPaperId, 'homework')"
                class="homeworkscore"
              >
                {{ data.homeworkScore }}
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                content="查看作业"
                placement="top-start"
              >
                <img
                  v-if="
                    data.homeworkPaperId ||
                    (!data.homeworkPaperId && data.studyStatus == 2)
                  "
                  @click="routeTo(data, 2, 6)"
                  class="exam_paper_png"
                  src="@/assets/images/courseAdd/homeworkDetail.png"
                  alt="加载失败"
                />
              </el-tooltip>
            </template>
          </div>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
import {
  resetExam,
  getGroupMemberScore,
  resetHomework
} from '@/api/exam/exam'

export default {
  name: 'courseTrees',
  data() {
    return {
      content: '',
      loading: false,
      teacherScorePercent: 0,
      selfScorePercent: 0,
      leaderScorePercent: 0,
      otherGroupScorePercent: 0,
      scoreInfo: []
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    studentId: {
      type: [String, Number]
    },
    studentName: {
      type: [String]
    },
    isLeader: {
      type: [Boolean, Number]
    },
    courseInfo: {
      type: [Object]
    }
  },

  watch: {
    data: {
      handler(val) {
        //反向递归，通过内容层反推计算父节点的状态
        val.forEach((item) => this.reverseCalculateStatus(item))
        console.log('isLeader', this.isLeader)
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async showScoreInfo(examPaperId, examType) {
      console.log('showScoreInfo')
      if (!examPaperId) {
        this.$modal.msgWarning(
          `该${examType == 'exam' ? '考核' : '作业'}无试卷，分数为教师手动赋分`
        )
        return
      }
      this.loading = true
      let res = await getGroupMemberScore(examPaperId, this.studentId)
      const { code, data } = res
      if (code == 200) {
        this.loading = false
        if (data.length > 0) {
          this.teacherScorePercent = data[0].teacherScorePercent
          this.selfScorePercent = data[0].selfScorePercent
          this.leaderScorePercent = data[0].leaderScorePercent
          this.otherGroupScorePercent = data[0].otherGroupScorePercent
          for (const datum of data) {
            datum.teacherScore = (
              (datum.teacherScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.selfScore = (
              (datum.selfScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.leaderScore = (
              (datum.leaderScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.otherGroupScore = (
              (datum.otherGroupScore / datum.totalScore) *
              100
            ).toFixed(2)
          }
        }
        this.scoreInfo = data
        let content = ''

        if (this.teacherScorePercent > 0) {
          content += `教师评价x${this.teacherScorePercent}%`
        }

        if (this.selfScorePercent > 0) {
          if (content !== '') {
            content += ` + 学生自评x${this.selfScorePercent}%`
          } else {
            content += `学生自评x${this.selfScorePercent}%`
          }
        }

        if (this.leaderScorePercent > 0) {
          if (content !== '') {
            content += ` + 组长评分x${this.leaderScorePercent}%`
          } else {
            content += `组长评分x${this.leaderScorePercent}%`
          }
        }

        if (this.otherGroupScorePercent > 0) {
          if (content !== '') {
            content += ` + 组间互评x${this.otherGroupScorePercent}%`
          } else {
            content += `组间互评x${this.otherGroupScorePercent}%`
          }
        }

        this.content = content
      } else {
        this.loading = false
      }
    },
    routeTo(data, type, examType) {
      console.log(
        'routeTo',
        data.examPaperId,
        data.homeworkPaperId,
        type,
        examType
      )
      let PaperId = examType == 1 ? data.examPaperId : data.homeworkPaperId
      console.log(PaperId)
      if (!PaperId) {
        this.$modal.msgWarning(
          `该${examType == 1 ? '考核' : '作业'}无试卷，分数为教师手动赋分`
        )

        return
      }

      if (type == 1) {
        this.$router.push({
          path: '/approvalAnswer',
          query: {
            keyId: PaperId,
            studentId: this.studentId,
            approvalType: 1
          }
        })
      } else {
        this.$router.push({
          path: '/examDetail',
          query: {
            id: PaperId,
            studentId: this.$route.query.studentId,
            sign: 'tea',
            examType: examType
          }
        })
      }
    },
    resetHomework(id) {
      this.$confirm(`给予作业重做，作业成绩以重做后成绩为准`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '处理中...',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          let res
          try {
            res = await resetHomework(id, this.studentId)
          } catch (e) {
            loading.close()
          }
          const { code } = res
          if (code == 200) {
            loading.close()
            this.$modal.msgSuccess('操作成功')
            this.$emit('refresh')
          } else {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    resetExam(id) {
      this.$confirm(`给予重考，考核成绩以重考后成绩为准`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const loading = this.$loading({
            lock: true,
            text: '处理中...',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          let res
          try {
            res = await resetExam(id, this.studentId)
          } catch (e) {
            loading.close()
          }
          const { code } = res
          if (code == 200) {
            loading.close()
            this.$modal.msgSuccess('操作成功')
            this.$emit('refresh')
          } else {
            loading.close()
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    // 1 学习中  2 已完成  0 未开始  -1 未通过
    /* 如果所有的 child 的 status 都等于 2，则将 obj 的 status 设置为2。
     * 有一个child 的 status 都等于 -1则将 obj 的 status 设置为-1。
     * 不满足以上条件，即否则，将 obj 的 status 设置为 1。*/
    calculateStatus(obj) {
      if (obj.children) {
        obj.status = obj.children.every((child) => {
          if (child.children) {
            this.calculateStatus(child)
          }
          return child.status == 2
        })
          ? 2
          : obj.children.some((child) => child.status == -1)
            ? -1
            : 1
      }
    },
    reverseCalculateStatus(obj) {
      if (obj.children) {
        obj.children.forEach((child) => this.reverseCalculateStatus(child))
        this.calculateStatus(obj)
      }
    },
    expandAll() {
      this.$nextTick(() => {
        this.expandAllNodes(this.$refs.selectTree.store.root)
      })
    },
    collapseAll() {
      this.$nextTick(() => {
        this.collapseAllNodes(this.$refs.selectTree.store.root)
      })
    },
    expandAllNodes(node) {
      if (node) {
        node.expanded = true
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.expandAllNodes(childNode)
          })
        }
      }
    },
    collapseAllNodes(node) {
      if (node) {
        node.expanded = false
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.collapseAllNodes(childNode)
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &:active,
  &:hover {
    background: darken($bg_color, 5%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 5%);
    color: lighten($color, 40%);
  }

  @content;
}

.examHomeworkBtns {
  .tip {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    text-align: left;
    font-style: normal;

    span {
    }
  }

  .exam_paper_png {
    width: 32px;
    height: 32px;
  }

  .examscore {
    margin: 0 5px 0 15px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fa6400;
    line-height: 20px;
    text-align: right;
    font-style: normal;
  }

  .homeworkscore {
    margin: 0 5px 0 15px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #4e8dff;
    line-height: 20px;
    text-align: right;
    font-style: normal;
  }

  align-items: center;

  .examMarkBtn {
    margin-left: 10px;
    @include btn_plain(#fa6400, #ffffff) {
      width: 73px;
      height: 28px;
      background: #fa6400;
      border-radius: 8px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }
  }

  .homeworkMarkBtn {
    margin-left: 10px;
    @include btn_plain(#4e8dff, #ffffff) {
      width: 73px;
      height: 28px;
      background: #4e8dff;
      border-radius: 8px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }
  }

  .examRedoBtn {
    @include btn_plain(#fff5ee, #fa6400) {
      width: 73px;
      height: 28px;
      background: rgba(250, 100, 0, 0.07);
      border-radius: 8px;
      border: 1px solid #fa6400;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #fa6400;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }
  }

  .homeworkRedoBtn {
    @include btn_plain(#f0f9ff, #4e8dff) {
      width: 73px;
      height: 28px;
      background: #f0f9ff;
      border-radius: 8px;
      border: 1px solid #4e8dff;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #4e8dff;
      line-height: 28px;
      text-align: center;
      font-style: normal;
    }
  }
}

.custom_tree_node {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 0 0;
  box-sizing: border-box;

  .statechapter {
    // width: 60px;
    height: 30px;
    align-items: center;
    // justify-content: flex-end;
    // position: absolute;
    // top: 0;
    // left: -63px;
  }

  .state {
    margin-right: 4px;
    display: flex;
    align-items: center;

    .exam_icon {
      width: 16px;
      height: 16px;
      background: #fa6400;
      border-radius: 3px;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 4px;
    }

    .leader_icon {
      width: 16px;
      height: 16px;
      background: #4e8dff;
      border-radius: 3px;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 4px;
    }

    .round {
      width: 8px;
      height: 8px;
      border: 2px solid #19b300;
      border-radius: 50%;
    }

    .round_finish {
      width: 8px;
      height: 8px;
      background: #19b300;
      border-radius: 50%;
    }

    .round_fail {
      width: 8px;
      height: 8px;
      background: #ff3b30;
      border-radius: 50%;
    }

    .acting_icon {
      width: 16px;
      height: 16px;
    }

    .el-icon-success {
      font-size: 16px;
      color: #19b300;
    }

    .el-icon-error {
      font-size: 16px;
      color: #ff3b30;
    }
  }

  .flex_center {
    display: flex;
    align-items: center;

    .retest_count {
      font-size: 14px;
      color: #a6a6a6;
      margin-right: 10px;
    }
  }

  .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

::v-deep .el-tree-node__content {
  height: 40px;
}

::v-deep .el-icon-success,
::v-deep .el-icon-error {
  font-style: normal;
}

.red_color {
  font-size: 14px;
  color: #ff3b30 !important;
  margin: 0 10px;
  user-select: none;
  cursor: pointer;
}

.green_color {
  font-size: 14px;
  color: #19b300 !important;
  margin: 0 10px;
  user-select: none;
  cursor: pointer;
}
</style>
